import React, { Component } from 'react'
import { Layout, Breadcrumb } from 'antd'
const { Content, Footer, Sider } = Layout
import Menu from '../Layout/Menu'
import Header from '../Layout/Header'

export default Page => {
  return class extends Component {
    constructor(props) {
      super(props)
      this.state = {
        collapsed: false
      }
    }
    toggle = () => {
      this.setState({
        collapsed: !this.state.collapsed
      })
    }
    render() {
      return (
        <Layout style={{ minHeight: '100vh' }}>
          <Sider collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
            <Logo collapsed={this.state.collapsed} />
            <Menu />
          </Sider>
          <Layout>
            <Header collapsed={this.state.collapsed} onChangToggle={this.toggle} />
            <Content style={{ margin: '10px' }}>
              {/*<div>
                <Breadcrumb.Item>User</Breadcrumb.Item>
                <Breadcrumb.Item>Bill</Breadcrumb.Item>
              </div>*/}
              <div className="sys-content">
                <Page {...this.props} />
              </div>
            </Content>
            <Footer className="sys-foot">Ant Design ©2016 Created by Ant UED</Footer>
          </Layout>
        </Layout>
      )
    }
  }
}
//##############
//以下为当前页面的子组件
//##############
/**
 * Logo组件
 * @param props
 * @return {*}
 * @constructor
 */
function Logo(props) {
  return (
    <div className="logo-wrap">
      <div className="logo" />
      {!props.collapsed && <div className="logo-text">溢米辅导</div>}
    </div>
  )
}
